<template>
  <div class="indexStyle">
    <div>
      <el-menu class="el-menu-demo" mode="horizontal" @select="handleSelect">
        <el-menu-item
          index="1"
          @click.native="
            () => {
              $router.push({ name: 'companyIndex' });
            }
          "
          >我的项目</el-menu-item
        >
        <el-submenu index="2">
          <template slot="title">我的工作台</template>
          <el-menu-item index="2-1">未发布</el-menu-item>
          <el-menu-item index="2-2">已发布</el-menu-item>
          <el-menu-item index="2-3">待选择</el-menu-item>
          <el-menu-item index="2-4">待确认</el-menu-item>
          <el-menu-item index="2-5">已完结</el-menu-item>
          <!--    <el-submenu index="2-4">-->
          <!--      <template slot="title">选项4</template>-->
          <!--      <el-menu-item index="2-4-1">选项1</el-menu-item>-->
          <!--      <el-menu-item index="2-4-2">选项2</el-menu-item>-->
          <!--      <el-menu-item index="2-4-3">选项3</el-menu-item>-->
          <!--    </el-submenu>-->
        </el-submenu>
        <el-menu-item
          index="3"
          @click="
            () => {
              $router.push({ name: 'ranking' });
            }
          "
          >排名</el-menu-item
        >
        <el-menu-item
          index="4"
          @click.native="() => {dialogVisible = true;}">投诉</el-menu-item>
                <div class="logo"><img src="@/assets/2.jpg" alt="" /></div>

        <el-menu-item
          index="5"
          @click.native="() => { dialogProject = true;}">
          项目发布
        </el-menu-item>
        <el-menu-item index="6" popper-class="test" style="left: 60%">
          <el-dropdown trigger="click">
            <span class="el-dropdown-link"> nihao </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item @click.native="peopleCenterFunc"
              >个人中心</el-dropdown-item>
              <el-dropdown-item @click.native="returnfunc"
              >退出登录</el-dropdown-item
              >
            </el-dropdown-menu>
          </el-dropdown>
        </el-menu-item>
      </el-menu>
    </div>

    <!--    投诉弹出框-->
    <el-dialog title="投诉" :visible.sync="dialogVisible" width="50%">
      <el-form
        :model="ruleForm"
        :rules="rules"
        ref="ruleForm"
        label-width="auto"
        class="demo-ruleForm"
      >
        <el-form-item label="学生名称" prop="studentName">
          <el-input v-model="ruleForm.studentName"></el-input>
          <!--          <el-option label="区域一" value="shanghai"></el-option>-->
          <!--          <el-option label="区域二" value="beijing"></el-option>-->
          <!--          <el-option v-for="(item,index) in companyList" :key="index">{{item}}</el-option>-->
          <!--        </el-select>-->
        </el-form-item>
        <el-form-item label="学生Id" filterable prop="studentId">
          <el-input v-model="ruleForm.studentId"></el-input>
        </el-form-item>
        <el-form-item label="请选择涉及的项目" filterable prop="companyProject">
          <el-select
            v-model="ruleForm.companyProject"
            placeholder="请选择活动区域"
          >
            <el-option v-for="(item, index) in companyProject" :key="index">{{
              item
            }}</el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="过程描述" prop="companyDescribe">
          <el-col :span="12">
            <el-input
              type="textarea"
              v-model="ruleForm.companyDescribe"
            ></el-input>
          </el-col>
        </el-form-item>

      </el-form>
      <div slot="footer">
        <el-button type="primary" @click="onSubmit">提交</el-button>
        <el-button @click="oncancel">取消</el-button>
      </div>
    </el-dialog>
    <!-- 项目发布 -->
    <el-dialog title="项目发布" :visible.sync="dialogProject" width="50%">
      <el-form
      :model="projectForm"
      :rules="projectFormRules"
      ref="projectForm"
      label-width="auto"
      class="demo-ruleForm"
    >

      <el-form-item label="图片上传" prop="">
        <el-upload
          class="avatar-uploader"
          :limit="1"
          :file-list="fileList"
          action="Fake Action"
          ref="avatarPhoto"
          :auto-upload="false"
          :http-request="httpRequst"
          :on-change="filechange"
          list-type="picture"
          :on-success="handleAvatarSuccess"
          :before-upload="beforeAvatarUpload"
        >
          <i class="el-icon-plus avatar-uploader-icon" v-if="!fileList.length > 0"></i>
        </el-upload>
      </el-form-item>

        <el-form-item label="项目名称" prop="companyName">
          <el-col :span="20">
            <el-input v-model="projectForm.companyName" placeholder="项目名称"> </el-input>
          </el-col>
        </el-form-item>
        <el-form-item label="需求技术" filterable prop="technology">
          <el-col :span="20">
          <el-input v-model="projectForm.technology" placeholder="项目需求技术" type="textarea"></el-input>
            </el-col>
        </el-form-item>
        <el-form-item label="内容简介" prop="companyProject">
          <el-col :span="20">
          <el-input
            v-model="projectForm.introduction"
            placeholder="内容简介"
            type="textarea"
          >
          </el-input>
          </el-col>
        </el-form-item>
        <el-form-item label="完成时间" prop="companyTime">
          <el-col :span="20">
           <el-select v-model="projectForm.companyTime" >
             <el-option label="30天内" value="1"></el-option>
             <el-option label="30~60" value="2"></el-option>
             <el-option label="60~90" value="3"></el-option>
              <el-option label="90以上" value="4"></el-option>
           </el-select>
          </el-col>
        </el-form-item>
        <el-form-item label="金额定价方式" prop="moneyWay">
          <el-col :span="20">
            <el-select v-model="projectForm.moneyWay" >
              <el-option label="固定价格" value="1"></el-option>
              <el-option label="投标" value="2"></el-option>
            </el-select>
          </el-col>
        </el-form-item>
        <el-form-item label="项目金额" filterable prop="companyMoney">
          <el-col :span="20">
          <el-input v-model="projectForm.companyId" :disabled="projectForm.moneyWay==2"></el-input>
          </el-col>
        </el-form-item>
      </el-form>
      <div slot="footer">
        <el-button type="primary" @click="onSubmitCompany">提交</el-button>
        <el-button type="primary" @click="onSubmitCompany">保存</el-button>
        <el-button @click="oncancelCompany">取消</el-button>
      </div>
    </el-dialog>

      <router-view />

  </div>
</template>

<script>
  import axios from 'axios'
export default {

  data() {
    return {
      fileList: [],
      currentPage1: 5,
      dialogVisible: false,
      dialogProject: false,
      ruleForm: {},
      companyList: [],
      companyProject: [],
      projectForm: {},
      rules: {
        studentName: [
          { required: true, message: "请填写投诉学生名称", trigger: "blur" },
        ],
        studentId: [
          { required: true, message: "请填写学生id", trigger: "blur" },
        ],
        companyProject: [
          { required: true, message: "请选择涉及的项目", trigger: "change" },
        ],
        companyDescribe: [
          { required: true, message: "请描述过程", trigger: "change" },
        ],
      },
      projectFormRules: {
        companyName: [
          { required: true, message: "请填写项目名称", trigger: "blur" },
        ],
        technology: [
          { required: true, message: "请填写项目需求技术", trigger: "blur" },
        ],
        companyProject: [
          { required: true, message: "请填写投诉学生名称", trigger: "blur" },
        ],
        companyTime: [
          { required: true, message: "请填写投诉学生名称", trigger: "blur" },
        ],
        companyMoney:[
          { required: true, message: "请填写投诉学生名称", trigger: "blur" },
        ],
        moneyWay:[{ required: true, message: "请选择定价方式", trigger: "change" }]
      },
    };
  },
  methods: {
    // 项目发布表格
    onSubmitCompany(){

    },
    oncancelCompany(){
      this.dialogProject = false
      this.$refs.projectForm.resetFields()

    },
    // 图片上传请求
    httpRequst(item) {
      console.log("parmas", this.fileList, item);
      let fileData = new FormData();
      fileData.append("file", item.raw);
      axios({
        url: "/api/file/upload",
        headers: {
          "content-type": "multipart/form-data",
        },
        method: "POST",
        data: fileData,
      }).then((res) => {
        console.log(res, 999);
        this.ruleForm.avatarUrl = res.data.url;
        console.log(this.ruleForm, "头像上传");
      });
    },
    //图片改变
    filechange(file, fileList) {
      console.log(file, fileList, 6666669999);
      this.fileList = fileList;
      this.$refs.avatarPhoto.submit(file);
    },
    handleAvatarSuccess() {
      console.log("handleAvatarSuccess");
    },
    //设置上传图片的格式头像
    beforeAvatarUpload(file) {
      console.log("beforeAvatarUpload", file);
    },



    handleSelect() {
      console.log(111, this);
    },
    //投诉提交
    onSubmit() {
      this.$refs.ruleForm.validate((res) => {
        console.log(res);
        if (res) {
          //   //发送请求
          //   this.$ajax({}).then(res=>{
          //    console.log(res)
          //   this.$message.success('提交成功，工作人员进行调查')
          //   this.$refs.ruleForm.resetFields()
          //   this.dialogVisible = false
          //   }).catch()
        }
      });
    },
    //投诉取消
    oncancel() {
      this.$refs.ruleForm.resetFields();
      this.dialogVisible = false;
    },
    //退出登录
    returnfunc() {
      console.log(1199991);
      this.$router.push("/");
      //释放浏览器缓存
      sessionStorage.clear();
    },
    // 跳转到个人详情页
    peopleCenterFunc() {
      this.$router.push({
        name: "company-message",
      });
    },
  },
};
</script>

<style lang="less" scoped>
.indexStyle {
  width: 100%;
  height: 100%;
  /*background-color: red;*/
}
.logo {
  width: 54px;
  height: 54px;
  border-radius: 50%;
  overflow: hidden;
  position: absolute;
  right: 8%;
  top: 50%;
  transform: translate(0, -50%);
  img {
    width: 100%;
    height: 100%;
  }
}
.name {
  width: 100px;
  height: 54px;
  // border-radius: 50%;
  // overflow: hidden;
  position: absolute;
  right: 100px;
  top: 50%;
  transform: translate(0, -50%);
}
.test {
  /*background-color: red;*/
}
/deep/ .el-textarea {
  .el-textarea__inner {
    /*background-color: skyblue;*/
    min-height: 100px !important;
  }
}
/deep/ .el-form-item__label {
  width: 150px !important;
}
.buttongroup {
  padding-left: 8%;
}
</style>
